<template>
  <div>
    <el-row>
      <!-- 产品展示表格 -->
      <el-col :span="24">
        <div class="grid-content bg-purple-light">
          <h3>个人产品信息</h3>
          <template>
            <el-table :data="productList" stripe style="width: 100%">
              <el-table-column prop="productName" label="产品名称" width="150">
              </el-table-column>
              <el-table-column prop="productDesc" label="产品简介" width="180">
              </el-table-column>
              <el-table-column
                prop="productAmount"
                label="贷款额度（元）"
                width="150"
              >
              </el-table-column>
              <el-table-column
                prop="productTypeName"
                label="产品类型"
                width="120"
              >
              </el-table-column>
              <el-table-column prop="averageName" label="还款方式" width="150">
              </el-table-column>
              <el-table-column prop="productFlag" label="产品状态" width="120">
              </el-table-column>
              <el-table-column
                prop="productLabelFlag"
                label="产品标签"
                width="120"
              >
              </el-table-column>
              <el-table-column prop="address" label="操作" width="250">
                <template slot-scope="scope">
                  <el-button type="primary" @click="selectThisProduct(scope.row.productId)">修改</el-button>
                  <el-button type="warning" @click="undercarriage(scope.row.productId)">下架</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div></el-col
      ></el-row
    >

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="pageInfo.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>

    <!-- 修改表单 -->
    <el-dialog title="修改产品" :visible.sync="dialog.updateShow" width="30%">
      <el-form :model="updateForm">
        <el-form-item label="产品名称" :label-width="formLabelWidth">
          <el-input v-model="updateForm.productName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品简介" :label-width="formLabelWidth">
          <el-input v-model="updateForm.productDesc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="贷款额度（元）" :label-width="formLabelWidth">
          <el-input v-model="updateForm.productAmount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品类型">
          <el-select
            v-model="updateForm.productTypeId"
            placeholder="请选择产品类型"
          >
            <el-option
              :label="item.productTypeName"
              :value="item.productTypeId"
              v-for="(item, index) in productType"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="还款方式">
          <el-select
            v-model="updateForm.productPaymethod"
            placeholder="请选择还款方式"
          >
            <el-option
              :label="item.averageName"
              :value="item.averageId"
              v-for="(item, index) in average"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品标签">
          <el-select
            v-model="updateForm.productLabel"
            placeholder="请选择产品标签"
          >
            <el-option
              :label="item.productLabelFlag"
              :value="item.productLabelId"
              v-for="(item, index) in productLabel"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateShow = false">取 消</el-button>
        <el-button type="primary" @click="updateProduct"
          >提 交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formLabelWidth: "30%",
      dialog: {
        updateShow: false,
      },
      average: [],
      productType: [],
      productLabel: [],
      updateForm: {},
      productList: [],
      pageInfo: {
        pageSizes: [5, 10, 20, 50],
        total: 1,
      },
      query: {
        currentPage: 1,
        pageSize: 5,
      },
    };
  },
  methods: {
    selectAllRepayment() {
      this.$axios.get("/averages").then((res) => {
        this.average = res.data.data.average;
      });
    },

    selectProductType() {
      this.$axios.get("/productTypes").then((res) => {
        this.productType = res.data.data.productType;
      });
    },

    selectProductLabel() {
      this.$axios.get("/products/productLabels").then((res) => {
        this.productLabel = res.data.data.productLabel;
      });
    },

    selectThisProduct(id){
      this.dialog.updateShow = true;
      this.$axios.post("/products/"+id)
      .then(res=>{
        this.updateForm = res.data.data.updateForm;
      })
    },

    updateProduct() {
      this.$axios.put("/products/updateProduct",this.updateForm).then((res) => {
        if(res.data.code == 200){
          this.$message.success("修改成功");
          this.dialog.updateShow = false;
          this.selectPersonProducts();
        }else{
          this.$message.warn();("修改失败，请稍后重试");
        }
      });
    },

    undercarriage(id){
      this.$axios.get("/products/"+id)
      .then(res=>{
        if(res.data.code == 200){
          this.$message.success("申请下架成功，请等待审核");
          this.selectPersonProducts();
        }else{
          this.$message.warn();("下架申请失败，请稍后重试");
        }
      })
    },

    selectPersonProducts() {
      this.$axios.post("/products/personProduct", this.query).then((res) => {
        this.productList = res.data.data.products;
        this.pageInfo.total = res.data.data.total;
      });
    },

    handleCurrentChange(currentPage) {
      this.query.currentPage = currentPage;
      this.selectPersonProducts();
    },

    handleSizeChange(size) {
      this.query.pageSize = size;
      this.selectPersonProducts();
    },
  },
  mounted() {
    this.selectPersonProducts();
    this.selectAllRepayment();
    this.selectProductType();
    this.selectProductLabel();
  },
};
</script>